<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap");

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            min-height: 100svh;
            background: #232228;
            font-family: "Nunito", sans-serif;
            position: relative;
            overflow-x: hidden;
            display: grid;
            place-items: center;
        }

        a {
            text-decoration: none;
            display: inline-block;
        }

        section {
            width: 100%;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            max-width: 50em;
            margin-inline: auto;
            gap: 3.25rem;
            position: relative;
            z-index: 10;
            align-items: center;
            padding: 5em 0;
        }

        section .card {
            position: relative;
            z-index: 555;
            max-width: 20rem;
            min-height: 20rem;
            width: 90%;
            display: grid;
            place-content: center;
            place-items: center;
            text-align: center;
            position: relative;
            box-shadow: 1px 12px 25px rgba(0, 0, 0, 0.78);
            border-radius: 2.25rem;
        }

        section .card::before {
            position: absolute;
            content: "";
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 2.25rem;
            z-index: -1;
            border: 0.155rem solid transparent;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
            mask-composite: exclude;
        }

        section .card-header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.8em 0.5em 0em 1.5em;
        }

        section .card-header .date {
            color: #ddd;
        }

        section .card-header svg {
            color: #fff;
            width: 2.5rem;
            cursor: pointer;
        }

        section .card-body {
            position: absolute;
            width: 100%;
            display: block;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 0.7em 1.25em 0.5em 1.5em;
        }

        section .card-body h3 {
            color: #fff;
            font-size: 1.375rem;
            margin-top: 0.625em;
            margin-bottom: 0.188em;
            text-transform: capitalize;
            font-weight: 600;
        }

        section .card-body p {
            color: #ddd;
            font-size: 1rem;
            letter-spacing: 0.031rem;
        }

        section .card-body .progress {
            margin-top: 0.938rem;
        }

        section .card-body .progress .progress-bar {
            position: relative;
            width: 100%;
            background: #363636;
            height: 0.313rem;
            display: block;
            border-radius: 3.125rem;
        }

        section .card-body .progress .progress-bar:after {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            height: 100%;
            display: block;
            border-radius: 3.125rem;
        }

        section .card-body .progress span:first-of-type {
            color: #fff;
            text-align: left;
            font-weight: 600;
            width: 100%;
            display: block;
            margin-bottom: 0.313rem;
        }

        section .card-body .progress span {
            margin-top: 0.313rem;
            text-align: right;
            display: block;
            color: #fff;
        }

        section .card-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            border-top: 0.063rem solid #292929;
            display: flex;
            justify-content: space-between;
            padding: 0.7em 1.25em 0.5em 1.5em;
            background: #151419;
            border-bottom-left-radius: 2.25rem;
            border-bottom-right-radius: 2.25rem;
        }

        section .card-footer ul {
            display: flex;
            align-items: center;
        }

        section .card-footer ul li {
            list-style-type: none;
            display: flex;
            margin-right: -0.625rem;
        }

        section .card-footer ul li img {
            border-radius: 50%;
            width: 1.875rem;
            height: 1.875rem;
            object-fit: cover;
        }

        section .card-footer .btn-add {
            width: 1.375rem;
            height: 1.375rem;
            border-radius: 50%;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        section .card-footer .btn-add svg {
            width: 1rem;
        }

        section .card-footer .btn-countdown {
            background: #222127;
            color: #fff;
            border-radius: 2em;
            padding: 0.625rem 1.5rem;
        }

        section .green {
            background: radial-gradient(ellipse at right top, #107667ed 0%, #151419 47%, #151419 100%);
        }

        section .green:before {
            background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #01c3a8) border-box;
        }

        section .green .btn-add {
            background: #01c3a8;
        }

        section .green .progress-bar:after {
            width: 90%;
            background: #01c3a8;
        }

        section .green .btn-countdown:hover {
            background: #01c3a8;
        }

        section .blue {
            background: radial-gradient(ellipse at right top, #00458f8f 0%, #151419 45%, #151419 100%);
        }

        section .blue:before {
            background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #1890ff) border-box;
        }

        section .blue .btn-add {
            background: #1890ff;
        }

        section .blue .progress-bar:after {
            width: 20%;
            background: #1890ff;
        }

        section .blue .btn-countdown:hover {
            background: #1890ff;
        }

        section .orange {
            background: radial-gradient(ellipse at right top, #ffb74194 0%, #151419 47%, #151419 100%);
        }

        section .orange:before {
            background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #ffb741) border-box;
        }

        section .orange .btn-add {
            background: #ffb741;
        }

        section .orange .progress-bar:after {
            width: 30%;
            background: #ffb741;
        }

        section .orange .btn-countdown:hover {
            background: #ffb741;
        }

        section .red {
            background: radial-gradient(ellipse at right top, #a63d2a82 0%, #151419 47%, #151419 100%);
        }

        section .red:before {
            background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #a63d2a) border-box;
        }

        section .red .btn-add {
            background: #a63d2a;
        }

        section .red .progress-bar:after {
            width: 50%;
            background: #a63d2a;
        }

        section .red .btn-countdown:hover {
            background: #a63d2a;
        }
    </style>
</head>

<body>
    <section>
        <div class="card green">
            <div class="card-header">
                <div class="date">
                    Feb 2, 2021
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                    <path fill-rule="evenodd"
                        d="M10.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="card-body">
                <h3>web designing</h3>
                <p>Prototyping</p>
                <div class="progress">
                    <span>Progress</span>
                    <div class="progress-bar"></div>
                    <span>90%</span>
                </div>
            </div>
            <div class="card-footer">
                <ul>
                    <li> <img
                            src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt=""></li>
                    <li> <img
                            src="https://images.pexels.com/photos/1043474/pexels-photo-1043474.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt=""></li>
                    <a href="#" class="btn-add"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                            fill="currentColor" class="size-6">
                            <path fill-rule="evenodd"
                                d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </ul>

                <a href="#" class="btn-countdown">2 days left</a>
            </div>
        </div>
        <div class="card orange">
            <div class="card-header">
                <div class="date">
                    Feb 05, 2021
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                    <path fill-rule="evenodd"
                        d="M10.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="card-body">
                <h3>mobile app</h3>
                <p>Shopping</p>
                <div class="progress">
                    <span>Progress</span>
                    <div class="progress-bar"></div>
                    <span>30%</span>
                </div>
            </div>
            <div class="card-footer">
                <ul>
                    <li> <img
                            src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt=""></li>
                    <li> <img
                            src="https://images.pexels.com/photos/874158/pexels-photo-874158.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt=""></li>
                    <a href="#" class="btn-add"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                            fill="currentColor" class="size-6">
                            <path fill-rule="evenodd"
                                d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </ul>

                <a href="#" class="btn-countdown">3 weeks left</a>
            </div>
        </div>
        <div class="card red">
            <div class="card-header">
                <div class="date">
                    March 03, 2021
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                    <path fill-rule="evenodd"
                        d="M10.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="card-body">
                <h3>dashboard</h3>
                <p>Medical</p>
                <div class="progress">
                    <span>Progress</span>
                    <div class="progress-bar"></div>
                    <span>50%</span>
                </div>
            </div>
            <div class="card-footer">
                <ul>
                    <li> <img
                            src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt=""></li>
                    <li> <img
                            src="https://images.pexels.com/photos/733872/pexels-photo-733872.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt=""></li>
                    <a href="#" class="btn-add"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                            fill="currentColor" class="size-6">
                            <path fill-rule="evenodd"
                                d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </ul>

                <a href="#" class="btn-countdown">3 weeks left</a>
            </div>
        </div>
        <div class="card blue">
            <div class="card-header">
                <div class="date">
                    March 08, 2021
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                    <path fill-rule="evenodd"
                        d="M10.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="card-body">
                <h3>web designing</h3>
                <p>Wireframing</p>
                <div class="progress">
                    <span>Progress</span>
                    <div class="progress-bar"></div>
                    <span>20%</span>
                </div>
            </div>
            <div class="card-footer">
                <ul>
                    <li> <img
                            src="https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt="Erik Longman"></li>
                    <li> <img
                            src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt="Jane Doe"></li>
                    <a href="#" class="btn-add"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                            fill="currentColor" class="size-6">
                            <path fill-rule="evenodd"
                                d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </ul>

                <a href="#" class="btn-countdown">3 weeks left</a>
            </div>
        </div>
    </section>
</body>

</html>